<template>
  <div class="login-page">
    <div class="login-content">
      <van-nav-bar>
        <template #title>
          <div class="title">
            注册
          </div>
        </template>
      </van-nav-bar>
      <van-form @submit="onSubmit">
        <van-field
          v-model="registerParams.userAccount"
          name="username"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写账号' }]"
        />
        <van-field
          v-model="registerParams.userName"
          name="username"
          label="昵称"
          placeholder="昵称"
          :rules="[{ required: true, message: '请填写昵称' }]"
        />
        <van-field
          v-model="registerParams.userPassword"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field
          v-model="registerParams.checkPassword"
          type="password"
          name="password"
          label="确认密码"
          placeholder="请确认密码"
          :rules="[{ required: true, message: '请确认密码' }]"
        />
        <div style="margin: 16px">
          <van-button
            block
            type="primary"
            native-type="submit"
          >注册
          </van-button>
        </div>
      </van-form>
      <div
        class="link"
        @click="toLogin"
      >
        已有账号,去登录
      </div>
      <!--      <router-link to="/register" class="link"></router-link>-->
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { showNotify } from 'vant'
import router from '@/router/index.js'
import { useUserStore } from '@/stores/userStore'

const userStore = useUserStore()

const registerParams = ref({
  userAccount: '',
  userName: '',
  userPassword: '',
  checkPassword: ''
})

const onSubmit = async () => {
  if (registerParams.value.userPassword !== registerParams.value.checkPassword) {
    showNotify({ type: 'danger', message: '两次密码输入不一致' })
    return
  }
  try {
    await userStore.onRegister(registerParams.value)
  } catch (error) {
    showNotify({ type: 'danger', message: error.message })
  }
}

const toLogin = () => {
  router.push('/login')
}
</script>

<style scoped>
.login-page {
  width: 100%;
  height: 100vh;
  display: flex;
  overflow: hidden;
  background-image: url("@/assets/img/login.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.9;

  .login-content {
    margin: auto;
    padding: 10px 10px 20px 10px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    opacity: 0.9;

    .title {
      font-size: 20px;
      font-weight: 600;
    }
  }

  .link {
    font-size: 12px;
    color: #069;
    float: right;
    margin-right: 15px;
  }
}
</style>